<template>
  <Card class="tilt-settings">
    <div class="header">
      <Icon type="ios-options" />
      <h3>倒水倾斜参数设置</h3>
    </div>

    <Collapse v-model="activePanels">
      <!-- 上升倾斜设置 -->
      <Panel name="rise">
        上升倾斜设置
        <div slot="content">
          <div class="settings-container">
            <div
              class="crane-settings"
              v-for="(crane, i) of localParams"
              :key="crane.id"
            >
              <div class="crane-title">{{ i + 1 }}号行车</div>
              <Form
                class="params-grid"
                label-position="left"
                :label-width="160"
              >
                <FormItem
                  :label="item.label"
                  class="param-item"
                  v-for="(item, index) in riseSettings"
                  :key="index"
                >
                  <InputNumber
                    v-model="crane.rise[item.field].value"
                    :min="item.min"
                    :max="item.max"
                    @on-blur="handleBlur('rise', item.field, i)"
                  />
                  <span class="unit">{{ item.unit }}</span>
                </FormItem>
              </Form>
            </div>
          </div>
        </div>
      </Panel>

      <!-- 下降倾斜设置 -->
      <Panel name="fall">
        下降倾斜设置
        <div slot="content">
          <div class="settings-container">
            <div
              class="crane-settings"
              v-for="(crane, i) of localParams"
              :key="crane.id"
            >
              <div class="crane-title">{{ i + 1 }}号行车</div>
              <Form :label-width="120">
                <FormItem label="入水快速保持时间">
                  <InputNumber
                    v-model="crane.fall.fastHoldTime.value"
                    :min="0"
                    :max="3000"
                    @on-blur="handleBlur('fall', 'fastHoldTime', i)"
                  />
                  <span class="unit">秒</span>
                </FormItem>
              </Form>
            </div>
          </div>
        </div>
      </Panel>
    </Collapse>
  </Card>
</template>

<script lang="ts">
import { Tsrv, T_srv, ifs, ts, vue, N_drivingSet } from './config';

@T_srv.comp
export default class TiltSettings extends vue {
  @T_srv.prop({ required: true }) craneParams!: N_drivingSet.TiltParams[];

  private activePanels = ['rise', 'fall'];

  private localParams: N_drivingSet.TiltParams[];

  private riseSettings = [
    {
      label: '慢速后快速保持时间',
      field: 'slowToFastTime',
      unit: '秒',
      max: 32000,
      min: 0
    },
    {
      label: '上升慢速保持时间',
      field: 'slowKeepTime',
      unit: '秒',
      max: 32000,
      min: 0
    },
    { label: '上升倾斜角度', field: 'angle', unit: '度', max: 32000, min: 0 },
    {
      label: '上升倾斜开始位',
      field: 'startPosition',
      unit: 'mm',
      max: 3000,
      min: 0
    }
  ];

  @T_srv.watch('craneParams', { deep: true })
  onParamsChange(newVal: N_drivingSet.TiltParams[]) {
    this.$nextTick(() => {
      this.localParams = Tsrv.utils.clone(newVal, true);
      this.$forceUpdate();
    });
  }

  created() {
    this.localParams = Tsrv.utils.clone(this.craneParams, true);
  }

  private handleBlur(type: 'rise' | 'fall', field: string, index: number) {
    const original = Tsrv.utils.md5(JSON.stringify(this.craneParams));
    const current = Tsrv.utils.md5(JSON.stringify(this.localParams));

    if (original !== current) {
      this.$emit('setting-update', {
        craneId: this.localParams[index].id, // 1号行车
        type,
        field,
        value: current
      });
    }
  }
}
</script>

<style lang="scss" scoped>
$text-color-secondary: #808695;

.tilt-settings {
  margin-bottom: 16px;

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    h3 {
      margin-left: 8px;
      font-size: 16px;
    }
  }

  .settings-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    // grid-gap: 16px;

    .crane-settings {
      display: flex;
      flex-direction: column;
      align-items: center;

      .crane-title {
        margin: 16px 0;
        font-size: 14px;
        font-weight: 600;
      }

      .params-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }
    }

    .crane-settings:last-child {
      border-left: 16px solid #e3e8e7;
    }
  }

  ::v-deep .ivu-collapse {
    border: none;

    &-item {
      margin-bottom: 8px;
      border: 1px solid #e8eaec;
      border-radius: 4px;

      &-header {
        padding: 12px;
        background-color: #f8f8f9;
      }
    }
  }

  .unit {
    margin-left: 8px;
    color: $text-color-secondary;
  }

  ::v-deep .ivu-input-number {
    width: 200px;

    &-input {
      text-align: left;
    }
  }
}
</style>
